import React from "react";
import GenerCode from './Generate';
import './index.less'
const generCode = new GenerCode();
class Generate extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			selector: '',
			code: '',
		};
	}

	componentDidMount() {
		generCode.update((code) => {
			this.setState({ code }, () => {
				document.querySelectorAll("pre code").forEach(block => {
					try { hljs.highlightBlock(block); }
					catch (e) { console.log(e); }
				});
			})

		})

	}
	createApp() {
		generCode.exec('start-app');
	}
	createTest() {
		generCode.exec('create-test');
	}
	runTest() {

	}
	exportTest() {

	}
	// ------------
	setSelector(e) {
		const selector = e.target.value;
		this.setState({
			selector
		})
	}
	addClick() {
		const { selector } = this.state;
		generCode.addClick(selector)
	}
	addInput(e) {
		const { selector } = this.state;
		generCode.addInput(selector, e.target.value)
	}
	addScroll(e) {
		const { selector } = this.state;
		generCode.addScroll(selector, 30)
	}



	render() {
		const { code, selector } = this.state;
		return <div>
			<div className="container">
				<div className="toolbar">
					<h3>功能区 :</h3>
					<button onClick={this.createApp.bind(this)}>1 - 新建测试项目</button>
					<button onClick={this.createTest.bind(this)}>2 - 新建测试脚本</button>
					<div>
						<button onClick={this.runTest.bind(this)}>3  -  执行脚本</button>
						<button onClick={this.exportTest.bind(this)}>4  -  导出脚本</button>
					</div>
					<h3>元素区 :</h3>
					<div>
						<div>
							<input onChange={this.setSelector.bind(this)} ></input>
						</div>

						<button disabled={!selector} onClick={this.addClick.bind(this)}>点击</button>
						<button disabled={!selector} onClick={this.addInput.bind(this)}>输入</button>
						<button disabled={!selector} onClick={this.addScroll.bind(this)}>滚动</button>
					</div>
				</div>
				<div className="code">
					<h3>code :</h3>
					<pre className="preview"><code>{code}</code></pre>
				</div>
			</div>

		</div>;
	}
}

export default Generate;
